<template>
  <div class="ontology-edit-edge">
    <div class="node-empty" v-show="drawerTypeOfEdge == 'empty'">
      请选择节点查看节点详情，或者点击新增节点按钮新增节点。
    </div>
    <div
      class="node-edit self-scroll"
      v-show="drawerTypeOfEdge !== 'empty'"
      ref="nodeEdit"
      style="padding: 16px"
    >
      <el-form
        :model="edgeData"
        ref="nodeForm"
        :rules="rules"
        hide-required-asterisk
      >
        <el-form-item label="关系名称：" prop="name" class="node-form">
          <!-- <el-input v-model.trim="edgeData.name" :readonly="drawerTypeOfEdge==='detail'" class="default-name"
                        clearable></el-input> -->
          <el-input
            v-model.trim="edgeData.name"
            v-if="drawerTypeOfEdge !== 'detail'"
            class="default-name"
            maxlength="50"
            show-word-limit
            clearable
          ></el-input>
          <p v-else class="node-form-value one-row-text" style="width: 200px">
            {{ edgeData.name }}
          </p>
        </el-form-item>
        <el-form-item label="关系详情：" class="node-form">
          <div class="relation-box" v-if="drawerTypeOfEdge !== 'detail'">
            <el-input
              v-model.trim="sourceName"
              readonly
              class="default-name"
              size="small"
            ></el-input>
            <div class="arrow">
              <!-- <i class="el-icon-back" v-if="direction==='two-way'"></i>
                            <i v-else>-</i> -->
              <i>-</i>
            </div>
            <el-input
              v-model.trim="edgeData.name"
              readonly
              class="default-name"
              size="small"
            ></el-input>
            <div class="arrow">
              <i class="el-icon-right"></i>
            </div>
            <el-input
              v-model.trim="targetName"
              readonly
              class="default-name"
              size="small"
            ></el-input>
          </div>
          <div v-else style="display: flex">
            <p class="node-form-value one-row-text">{{ sourceName }}</p>
            <div class="arrow">
              <!-- <i class="el-icon-back" v-if="direction==='two-way'"></i>
                            <i v-else>-</i> -->
              <i>-</i>
            </div>
            <p class="node-form-value one-row-text">{{ edgeData.name }}</p>
            <div class="arrow">
              <i class="el-icon-right"></i>
            </div>
            <p class="node-form-value one-row-text">{{ targetName }}</p>
          </div>
        </el-form-item>
        <!-- <el-form-item label="关系方向：" class="node-form">
                    <el-radio-group v-model="direction" :disabled="drawerTypeOfEdge==='detail'">
                        <el-radio label="one-way">单向</el-radio>
                        <el-radio label="two-way">多向</el-radio>
                    </el-radio-group>
                </el-form-item> -->
      </el-form>
      <div class="property-box">
        <div class="property-header">
          <span class="title">属性信息:</span>
          <!-- <el-button v-if="drawerTypeOfEdge!=='detail'" @click="openDialog" type="primary">新增</el-button> -->
          <div
            style="color: #4b71eb; cursor: context-menu"
            @click="openDialog"
            v-if="drawerTypeOfEdge !== 'detail'"
          >
            <i
              class="el-icon-plus"
              style="font-size: 12px; margin-right: 6px"
            ></i
            ><i>新增</i>
          </div>
        </div>
        <el-table
          :data="tableList"
          @row-contextmenu="tableClick"
          border
          :cell-style="{ padding: '6px 0' }"
          class="property-table"
          :header-cell-style="{
            background: 'rgba(61, 96, 212, 0.12)',
            height: '36px',
            color: '#333333',
          }"
        >
          <el-table-column label="序号" width="50" align="center" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="propertyName"
            label="属性名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="propertyType"
            label="属性值类型"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ propertyTypeObj[scope.row.propertyType] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="100"
            v-if="drawerTypeOfEdge !== 'detail'"
          >
            <template slot-scope="scope">
              <div v-show="drawerTypeOfEdge !== 'detail'">
                <i
                  class="el-icon-edit"
                  @click="nodeEditScope(scope.row)"
                  style="margin-right: 16px"
                ></i>
                <i
                  class="el-icon-delete"
                  slot="reference"
                  @click="nodeDelScope(scope.row)"
                ></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :title="dialogFormTitle"
        :visible.sync="dialogFormVisible"
        @close="afterDialogClose"
        :append-to-body="true"
      >
        <el-form
          :model="property"
          :rules="propertyRules"
          ref="dialogForm"
          label-position="right"
          label-width="120px"
        >
          <el-form-item
            label="属性名:"
            prop="propertyName"
            class="dialog-inline"
          >
            <el-input
              v-model.trim="property.propertyName"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="属性值类型:"
            prop="propertyType"
            class="dialog-inline"
          >
            <el-select
              v-model="property.propertyType"
              @change="changePropertyType"
            >
              <el-option
                v-for="item in propertyTypeOptions"
                :key="item.key"
                :value="item.key"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              property.propertyType == 'int' || property.propertyType == 'float'
            "
            label="计量单位:"
            prop="measureUnit"
            class="dialog-inline"
          >
            <el-input
              type="input"
              v-model.trim="property.measureUnit"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="约束类型:"
            prop="propertyBind"
            class="dialog-inline"
          >
            <el-select
              v-model="property.propertyBind"
              :disabled="property.propertyBindDisabled"
            >
              <el-option
                v-for="item in getBindOptions(bindOptions)"
                :key="item.key"
                :value="item.key"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="约束配置:"
            class="dialog-inline"
            v-if="property.propertyBind && property.propertyBind != 'no_bind'"
          >
            <div v-if="property.propertyBind == 'enum'">
              <el-form-item prop="enumNames">
                <span
                  style="position: relative; margin-right: 10px"
                  v-for="(item, index) in property.enumNames"
                  :key="item.key"
                >
                  <el-input
                    v-if="
                      property.propertyType != 'date' &&
                      property.propertyType != 'datetime'
                    "
                    style="width: 154px; margin-bottom: 10px"
                    v-model="property.enumNames[index]"
                  ></el-input>
                  <el-date-picker
                    style="width: 154px; margin-bottom: 10px"
                    v-if="property.propertyType == 'date'"
                    v-model="property.enumNames[index]"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                  >
                  </el-date-picker>
                  <el-date-picker
                    v-if="property.propertyType == 'datetime'"
                    style="width: 154px; margin-bottom: 10px"
                    v-model="property.enumNames[index]"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                  >
                  </el-date-picker>

                  <i
                    style="
                      position: absolute;
                      right: 2px;
                      top: 1px;
                      color: #1b85ff;
                    "
                    class="el-icon-close"
                    @click="property.enumNames.splice(index, 1)"
                  ></i>
                </span>
                <span
                  style="
                    border-radius: 3px;
                    padding: 5px;
                    color: #1b85ff;
                    border: 1px solid;
                    margin: 15px;
                    cursor: pointer;
                  "
                  @click="property.enumNames.push('')"
                  >新增</span
                >
              </el-form-item>
            </div>
            <div v-else>
              <el-row>
                <el-col :span="10">
                  <el-form-item prop="startRange">
                    <el-input
                      v-if="
                        property.propertyType != 'date' &&
                        property.propertyType != 'datetime'
                      "
                      v-model="property.startRange"
                      style="width: 133px"
                    ></el-input>
                    <el-date-picker
                      :picker-options="pickerOptionsStart(property.endRange)"
                      style="width: 133px"
                      v-if="property.propertyType == 'date'"
                      v-model="property.startRange"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                    >
                    </el-date-picker>
                    <el-date-picker
                      :picker-options="pickerOptionsStart(property.endRange)"
                      v-if="property.propertyType == 'datetime'"
                      style="width: 133px"
                      v-model="property.startRange"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="margin-right: 5px">
                  <span> ~ </span>
                </el-col>
                <el-col :span="10">
                  <el-form-item prop="endRange">
                    <el-input
                      v-if="
                        property.propertyType != 'date' &&
                        property.propertyType != 'datetime'
                      "
                      v-model="property.endRange"
                      style="width: 133px"
                    ></el-input>
                    <el-date-picker
                      style="width: 133px"
                      v-if="property.propertyType == 'date'"
                      v-model="property.endRange"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                      :picker-options="pickerOptionsEnd(property.startRange)"
                    >
                    </el-date-picker>
                    <el-date-picker
                      :picker-options="pickerOptionsEnd(property.startRange)"
                      v-if="property.propertyType == 'datetime'"
                      style="width: 133px"
                      v-model="property.endRange"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :clearable="false"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetDialogForm">取 消</el-button>
          <el-button type="primary" @click="submitDialogForm" :loading="loading"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div v-if="drawerTypeOfEdge === 'detail'" style="display: flex">
      <div class="btn btn-edit" @click="changePageStatus('edit')">编辑</div>
      <div class="btn btn-delete" @click="changePageStatus('delete')">删除</div>
    </div>
    <div class="btn" v-else @click="changePageStatus('detail')">保存</div>
  </div>
</template>
<script>
import { deepClone } from "@/plugins/utils";
import { mapMutations, mapState } from "vuex";
export default {
  name: "EditEdge",
  props: {
    ontologyAllId: {
      type: String,
      required: true,
    },
    isShowNode: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data: () => {
    return {
      propertyTypeOptions: [
        { key: "text", label: "字符串" },
        { key: "int", label: "整数值" },
        { key: "float", label: "浮点值" },
        { key: "date", label: "日期" },
        { key: "datetime", label: "日期时间" },
        { key: "coordinate", label: "坐标" },
        { key: "array", label: "数组" },
        { key: "image", label: "图片" },
        { key: "file", label: "文件" },
      ],
      bindOptions: [
        { key: "no_bind", label: "无约束" },
        { key: "enum", label: "枚举值" },
        { key: "range", label: "范围值" },
      ],
      propertyTypeObj: {
        text: "字符串",
        int: "整数值",
        float: "浮点值",
        date: "日期",
        datetime: "日期时间",
        coordinate: "坐标",
        array: "数组",
        image: "图片",
        file: "文件",
      },
      graph: null,
      edgeData: {
        name: "", // 当前关系name
      },
      direction: "one-way", //方向
      // currentType:'detail', // 当前状态
      selfProperty: [], // 自己的属性
      parentProperty: [], // 父节点的属性
      tableList: [], // 包含所有的属性
      parentList: [], // 父节点列表
      dialogFormTitle: "新增属性", // 属性标题
      dialogFormVisible: false, // 属性dialog
      popoverVisible: false, // 属性删除提示
      property: {
        // 属性
        propertyName: null, // 属性值名
        propertyType: "", // 属性值类型
        enumNames: [],
        startRange: "",
        endRange: "",
        propertyBind: "",
        measureUnit: "",
      },
      propertyRules: {
        // 属性表单规则
        propertyName: [
          {
            required: true,
            message: "请输入属性名",
            trigger: "blur",
          },
        ],
        propertyType: [
          {
            required: true,
            message: "请输入属性值类型",
            trigger: "blur",
          },
        ],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入节点名称",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      propertyTypes: [
        {
          label: "数值",
          value: "number",
        },
        {
          label: "日期",
          value: "date",
        },
        {
          label: "日期时间",
          value: "time",
        },
        {
          label: "文本型",
          value: "text",
        },
      ],
      propertyTypesSub: {
        number: [
          "个",
          "厘米",
          "米",
          "千米",
          "平方米",
          "公顷",
          "平方千米",
          "立方米",
          "克",
          "千克",
          "吨",
        ],
        date: ["年", "月", "天"],
        time: ["秒", "分", "时"],
      },
      propertyBind: [
        {
          value: "unbind",
          label: "无约束",
        },
        {
          value: "range",
          label: "范围值",
        },
        {
          value: "enum",
          label: "枚举值",
        },
      ],
      editPropertyId: null,
      eleLoading: null,
      ontologyEdgeId: "",
    };
  },
  created() {
    this.$eventBus.$on("getGraph", (graph) => {
      this.graph = graph;
    });
  },
  computed: {
    ...mapState({
      drawerTypeOfEdge: (state) => state.ontologyModel.drawerTypeOfEdge,
      currentEdge: (state) => state.ontologyModel.currentEdge,
      newEdgeOfG6: (state) => state.ontologyModel.newEdgeOfG6,
    }),
  },
  methods: {
    ...mapMutations({
      change_drawer_type_of_edge: "ontologyModel/change_drawer_type_of_edge",
      change_current_edge: "ontologyModel/change_current_edge",
    }),
    pickerOptionsStart(endRange) {
      return {
        disabledDate: (time) => {
          if (endRange && endRange !== "") {
            return time.getTime() > new Date(endRange).getTime() - 86400000;
          }
        },
      };
    },
    pickerOptionsEnd(startRange) {
      return {
        disabledDate: (time) => {
          if (startRange && startRange !== "") {
            return time.getTime() < new Date(startRange).getTime();
          }
        },
      };
    },
    getBindOptions(val) {
      if (this.property.propertyType == "text") {
        return [
          { key: "no_bind", label: "无约束" },
          { key: "enum", label: "枚举值" },
        ];
      } else {
        return [
          { key: "no_bind", label: "无约束" },
          { key: "enum", label: "枚举值" },
          { key: "range", label: "范围值" },
        ];
      }
    },
    changePropertyType(val) {
      if (["coordinate", "array", "image", "file"].includes(val)) {
        this.property.propertyBind = "no_bind";
        this.property.propertyBindDisabled = true;
      } else {
        this.property.propertyBindDisabled = false;
      }
      if (["date", "datetime", "int", "float"].includes(val)) {
        this.property.startRange = "";
        this.property.endRange = "";
      }
      // 切换为字符串类型时 如果已经选择了范围约束类型 则重置
      if (val === "text" && this.property.propertyBind === "range") {
        this.property.propertyBind = "no_bind";
      }
    },
    // 获取节点详情
    getEdgeDetail() {
      let currentEdgeId = this.currentEdge.id;
      let params = {
        neo4jId: this.ontologyEdgeId ? this.ontologyEdgeId : currentEdgeId,
      };
      if (!params.neo4jId) return;
      this.$axios
        .get(this.$api.ontologyModel.xinbiaoObj.getRelationDetail, {
          params,
        })
        .then((res) => {
          let data = res.data.data;
          this.edgeData.id = data.id;
          this.edgeData.name = data.name;
          this.sourceName = data.sourceName;
          this.targetName = data.targetName;
          this.direction = data.type;
          if (data.property.length) {
            this.tableList = data.property.map((item, index) => {
              item.id = index + 1;
              return item;
            });
          } else {
            this.tableList = [];
          }
        });
    },
    // 新增属性
    openDialog() {
      this.editPropertyId = -1;
      this.dialogFormTitle = "新增属性";
      this.dialogFormVisible = true;
    },
    // 关闭
    afterDialogClose() {
      this.property = {
        // 属性
        propertyName: null, // 属性值名
        propertyType: "", // 属性值类型
        enumNames: [],
        startRange: "",
        endRange: "",
        propertyBind: "",
        measureUnit: "",
      };
    },
    // 切换编辑状态
    changePageStatus(type) {
      if (type === "detail") {
        this.eleLoading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.2)",
          fullscreen: false,
          target: this.$refs.nodeEdit,
        });
        // 点击保存时
        this.$refs.nodeForm.validate((valid) => {
          if (valid) {
            let url =
              this.drawerTypeOfEdge === "add"
                ? this.$api.ontologyModel.xuekuiObj.saveEdge
                : this.$api.ontologyModel.xuekuiObj.editEdge;
            this.saveEdge(this.drawerTypeOfEdge, url)
              .then((res) => {
                if (res) {
                  this.$emit("changeByEdge", res, "edit");
                  this.change_current_edge(deepClone(res.edge));
                  this.getEdgeDetail();
                  this.change_drawer_type_of_edge(type);
                  this.eleLoading.close();
                }
              })
              .catch((err) => {
                console.error(err);
                this.eleLoading.close();
              });
          } else {
            this.eleLoading.close();
            return false;
          }
        });
      }
      if (type === "edit") {
        this.change_drawer_type_of_edge(type);
      }
      if (type === "delete") {
        this.$emit("deleteEdge", this.edgeData);
      }
    },
    tableClick(row, column, event) {},
    // 删除属性
    deleteProperty(row) {
      let id = row.id;
      let delIndex = this.tableList.findIndex((item, index) => {
        return item.id === id;
      });
      if (delIndex > -1) {
        this.tableList.splice(delIndex, 1);
      }
    },
    // 新增/编辑属性
    submitDialogForm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          // 当前是编辑状态
          if (this.editPropertyId >= 0) {
            let editIndex = this.tableList.findIndex((item) => {
              return item.id === this.editPropertyId;
            });
            let tableItem = deepClone(this.property);
            tableItem.id = this.editPropertyId;
            this.tableList.splice(editIndex, 1, tableItem);
          } else {
            // 当前是新增状态
            let tableItem = deepClone(this.property);
            tableItem.id = this.tableList.length
              ? this.tableList[this.tableList.length - 1].id + 1
              : 1;
            this.tableList.push(tableItem);
          }
          this.dialogFormVisible = false;
          return true;
        } else {
          return false;
        }
      });
    },
    // 编辑当前属性
    nodeEditScope(row) {
      this.dialogFormTitle = "编辑属性";
      this.dialogFormVisible = true;
      this.editPropertyId = row.id;
      Object.assign(this.property, row);
      this.property.propertyBindDisabled = [
        "coordinate",
        "array",
        "image",
        "file",
      ].includes(row.propertyType);
    },
    cancelDelProperty() {
      this.popoverVisible = false;
    },
    // 确定删除属性
    confirmDelProperty() {
      this.popoverVisible = false;
    },
    resetDialogForm() {
      this.dialogFormVisible = false;
    },
    nodeDelScope(row) {
      this.deleteProperty(row);
    },
    saveEdge(type, url) {
      let { name } = this.edgeData;
      let property = this.tableList;
      let params = {
        property,
        type: this.direction,
        relationName: name,
      };
      if (type === "edit") {
        let { id } = this.currentEdge;
        params.neo4jId = this.ontologyEdgeId ? this.ontologyEdgeId : id;
      } else {
        let { edgeId, sourceId, targetId } = this.newEdgeOfG6;
        params.edgeId = edgeId;
        params.sourceId = sourceId;
        params.targetId = targetId;
        params.ontologyAllId = this.ontologyAllId;
      }
      return this.$axios
        .post(url, params)
        .then((res) => {
          let code = res.data.code;
          let message = res.data.message;
          let ontologySpoId = res.data.data;
          if (+code === 200) {
            this.$message.success("保存成功");
            let data = res.data.data;
            return data;
          } else {
            if (+code === 10011) {
              return this.$confirm(
                "关系已存在，但为禁用状态，是否重新启用？",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              )
                .then(() => {
                  return this.enableOntologySpo("000", ontologySpoId);
                })
                .catch(() => {
                  this.eleLoading.close();
                });
            } else {
              this.$message.warning(message);
              this.eleLoading.close();
              return false;
            }
          }
        })
        .catch((err) => {
          console.error(err);
          this.eleLoading.close();
        });
    },
    createEdge() {
      let { edgeId, sourceId, targetId } = this.newEdgeOfG6;
      let params = {};
      params.edgeId = edgeId;
      params.sourceId = sourceId;
      params.targetId = targetId;
      params.ontologyAllId = this.ontologyAllId;
      params.property = [];
      params.type = "one-way";
      params.relationName = "未命名";

      return this.$axios
        .post(this.$api.ontologyModel.xuekuiObj.saveEdge, params)
        .then((res) => {
          let code = res.data.code;
          let message = res.data.message;
          let ontologySpoId = res.data.data;
          if (res.data.data?.edge?.id) {
            this.ontologyEdgeId = res.data.data.edge.id;
          }
          if (+code === 200) {
            this.$message.success("操作成功");
            let data = res.data.data;
            this.$emit("changeByEdge", data, "add");

            this.getEdgeDetail();
            this.change_drawer_type_of_edge("edit");
            return data;
          } else {
            if (code === 10011) {
              return this.$confirm(
                "关系已存在，但为禁用状态，是否重新启用？",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              )
                .then(() => {
                  return this.enableOntologySpo(edgeId, ontologySpoId);
                })
                .catch(() => {
                  // this.graph.changeSize(this.graph.getWidth(), this.graph.getHeight())
                  this.eleLoading.close();
                });
            } else {
              this.$message.warning(message);
              this.eleLoading.close();
              return false;
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    async enableOntologySpo(edgeId, ontologySpoId) {
      let params = {
        edgeId,
        ontologySpoId,
      };
      let res = await this.$axios.get(
        this.$api.ontologyModel.xuekuiObj.enableOntologySpo,
        {
          params,
        }
      );
      if (res.data.code === 200) {
        this.$message.success("保存成功");
        let data = res.data.data;
        this.$emit("changeByEdge", data, "add");
        this.change_current_edge(deepClone(data.edge));

        this.getEdgeDetail();
        this.change_drawer_type_of_edge("edit");
        return data;
      }
    },
  },
  watch: {
    ontologyEdgeId: {
      handler: function (val) {
        if (val) {
          this.getEdgeDetail();
        }
      },
      immediate: true,
    },
    "currentEdge.id": {
      handler: function (val) {
        if (val) {
          this.getEdgeDetail();
        }
      },
      immediate: true,
    },
    isShowNode: {
      handler: function (val) {
        // 点击点之后点击边
        if (!this.isShowNode) {
          this.getEdgeDetail();
        }
      },
    },
    relationName: {
      handler: function (val) {
        if (val) {
          this.edgeData.name = val;
        }
      },
      immediate: true,
    },
    newEdgeOfG6: {
      handler: function (val) {
        let { sourceName, targetName } = val;
        this.sourceName = sourceName;
        this.targetName = targetName;
      },
      deep: true,
      immediate: true,
    },
    currentEdge: {
      handler: function (val) {
        this.ontologyEdgeId = "";
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/scss/scroll";
.node-edit {
  position: relative;
  overflow-y: auto !important;

  .node-form {
    margin-bottom: 16px;
    /deep/ .el-form-item__error {
      margin-left: 85px;
    }
    /deep/ .el-form-item__content {
      margin-left: 80px;
    }
    /deep/ .el-form-item__label {
      color: #999;
    }
    text-align: left;

    .default-name {
      width: 200px;
      /deep/ .el-input__inner {
        height: 32px;
      }
    }

    .relation-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .arrow {
      width: 30px;
      text-align: center;
    }
    .node-form-value {
      width: 94px;
      height: 32px;
      background: #f3f4f8;
      border-radius: 2px;
      line-height: 32px;
      padding-left: 6px;
      box-sizing: border-box;
    }
  }

  .upload-img {
    height: 150px;
    text-align: left;
    position: relative;

    .title {
      margin-bottom: 10px;
    }

    .reupload {
      position: absolute;
      bottom: 0px;
      left: 120px;
    }

    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      // overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .property-box {
    .property-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
    }
  }

  .submit-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;

    .submit-btn-item {
      margin-right: 5px;
    }
  }
}

.ontology-edit {
  padding: 0 5px;
}

/deep/ .el-dialog {
  width: 500px;
  border-radius: 5px;

  .el-input {
    width: 300px;
  }
}

.node-empty,
.node-edit {
  height: 100%;
}
.ontology-edit-edge {
  .node-edit {
    height: calc(100% - 96px);
  }
  .btn {
    height: 32px;
    background: #4b71eb;
    border-radius: 2px;
    border: 1px solid #4b71eb;
    line-height: 32px;
    text-align: center;
    cursor: context-menu;
    margin: 16px;
    box-sizing: border-box;
    color: #ffffff;
  }
  .btn-edit {
    margin: 10px;
    width: 60%;
    background: #ffffff;
    color: #4b71eb;
  }
  .btn-delete {
    margin: 10px;
    border: 1px solid red;
    width: 40%;
    background: #ffffff;
    color: red;
  }
  .property-table {
    /deep/ th {
      padding: 0;
    }
    /deep/ td {
      padding: 0;
    }
  }
}
</style>
